<template>
  <div class="settings-container">
    <h2>设置</h2>
    
    <el-tabs v-model="activeTab" class="settings-tabs">
      <el-tab-pane label="播放设置" name="player">
        <div class="settings-section">
          <h3>播放设置</h3>
          
          <div class="setting-item">
            <span>默认画质</span>
            <el-select v-model="settings.defaultQuality" style="width: 120px">
              <el-option label="自动" value="auto" />
              <el-option label="高清" value="hd" />
              <el-option label="超清" value="fhd" />
              <el-option label="蓝光" value="blueray" />
            </el-select>
          </div>
          
          <div class="setting-item">
            <span>自动播放</span>
            <el-switch v-model="settings.autoPlay" />
          </div>
          
          <div class="setting-item">
            <span>自动跳过片头片尾</span>
            <el-switch v-model="settings.skipIntro" />
          </div>
          
          <div class="setting-item">
            <span>默认倍速</span>
            <el-select v-model="settings.defaultSpeed" style="width: 100px">
              <el-option label="0.5x" value="0.5" />
              <el-option label="0.75x" value="0.75" />
              <el-option label="1x" value="1" />
              <el-option label="1.25x" value="1.25" />
              <el-option label="1.5x" value="1.5" />
              <el-option label="2x" value="2" />
            </el-select>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="下载设置" name="download">
        <div class="settings-section">
          <h3>下载设置</h3>
          
          <div class="setting-item">
            <span>下载路径</span>
            <div class="path-selector">
              <el-input v-model="settings.downloadPath" readonly style="width: 300px" />
              <el-button @click="selectDownloadPath">选择</el-button>
            </div>
          </div>
          
          <div class="setting-item">
            <span>最大同时下载数</span>
            <el-input-number v-model="settings.maxDownloads" :min="1" :max="10" />
          </div>
          
          <div class="setting-item">
            <span>下载完成后通知</span>
            <el-switch v-model="settings.notifyOnComplete" />
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="界面设置" name="interface">
        <div class="settings-section">
          <h3>界面设置</h3>
          
          <div class="setting-item">
            <span>主题</span>
            <el-select v-model="settings.theme" style="width: 120px">
              <el-option label="深色" value="dark" />
              <el-option label="浅色" value="light" />
              <el-option label="跟随系统" value="auto" />
            </el-select>
          </div>
          
          <div class="setting-item">
            <span>语言</span>
            <el-select v-model="settings.language" style="width: 120px">
              <el-option label="简体中文" value="zh-CN" />
              <el-option label="English" value="en-US" />
            </el-select>
          </div>
          
          <div class="setting-item">
            <span>显示弹幕</span>
            <el-switch v-model="settings.showDanmu" />
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="关于" name="about">
        <div class="settings-section">
          <h3>关于腾讯视频桌面版</h3>
          
          <div class="about-info">
            <p><strong>版本：</strong> v1.0.0</p>
            <p><strong>开发者：</strong> TencentVideoDesktop Team</p>
            <p><strong>更新时间：</strong> 2024-11-13</p>
            <p><strong>描述：</strong> 腾讯视频风格桌面端播放器</p>
          </div>
          
          <div class="about-actions">
            <el-button type="primary" @click="checkUpdate">检查更新</el-button>
            <el-button @click="openGitHub">访问GitHub</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('player')

const settings = ref({
  defaultQuality: 'auto',
  autoPlay: true,
  skipIntro: false,
  defaultSpeed: '1',
  downloadPath: 'C:\\Users\\Downloads\\TencentVideo',
  maxDownloads: 3,
  notifyOnComplete: true,
  theme: 'dark',
  language: 'zh-CN',
  showDanmu: true
})

const selectDownloadPath = () => {
  // 这里将调用Wails的API来选择文件夹
  console.log('选择下载路径')
}

const checkUpdate = () => {
  console.log('检查更新')
}

const openGitHub = () => {
  console.log('打开GitHub')
}
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
}

.settings-tabs {
  :deep(.el-tabs__nav) {
    border-bottom: 1px solid #333;
  }

  :deep(.el-tabs__item) {
    color: #b3b3b3;

    &.is-active {
      color: #ff6022;
    }
  }
}

.settings-section {
  padding: 20px 0;

  h3 {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--tx-bg-secondary);
    border-radius: 8px;

    span {
      font-size: 14px;
    }
  }

  .path-selector {
    display: flex;
    gap: 8px;
  }
}

.about-info {
  margin-bottom: 20px;

  p {
    margin-bottom: 8px;
    font-size: 14px;
  }
}

.about-actions {
  display: flex;
  gap: 12px;
}
</style>
